<template>
	<view class="page-wrapper">
		<ul>
			<li>
				<h3>头像</h3>
				<p>
					<image src="../../../../static/img/member/avatar.png" mode="widthFix"></image>
				</p>
				<span>
					<image src="../../../../static/img/public/right.png" mode="widthFix"></image>
				</span>
			</li>
			<li>
				<h3>昵称</h3>
				<p><input type="text" :value="name" placeholder="请输入昵称" /></p>
				<span>
					<image src="../../../../static/img/public/right.png" mode="widthFix"></image>
				</span>
			</li>
			<li>
				<h3>性别</h3>
				<p>
					<picker mode="selector" :range="sexArr" range-key="name" @change="bindSexChange" >
						<view class="uni-input">{{sex === 0 ? '男' : '女'}}</view>
					</picker>
				</p>
				<span>
					<image src="../../../../static/img/public/right.png" mode="widthFix"></image>
				</span>
			</li>
			<li>
				<h3>生日</h3>
				<p>
					<picker mode="date" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{birthday}}</view>
					</picker>
				</p>
				<span>
					<image src="../../../../static/img/public/right.png" mode="widthFix"></image>
				</span>
			</li>
			<li>
				<h3>城市</h3>
				<p>
					<gbPicker
					:name = "defaultAddress"
					 @update="update"
					 @change="change">
						<text>{{address}}</text>
					</gbPicker>
				</p>
				<span>
					<image src="../../../../static/img/public/right.png" mode="widthFix"></image>
				</span>
			</li>
		</ul>
		<button>
			保存
		</button>
	</view>
</template>

<script>
	import gbPicker from '../../../../components/gb-picker/gb-picker.vue';
	
	export default {
		components: {
			gbPicker
		},
		data() {
			return {
				name: '刘一碗',
				birthday: '1976-09-01',
				address: '',
				//默认地址
				defaultAddress: ['山东省','青岛市','城阳区'],
				sexArr: [
					{ id: 0, name: '男' },
					{ id: 1, name: '女' },
				],
				sex: 1
				
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			//性别选择
			bindSexChange(e) {
				this.sex = parseInt(e.target.value)
			},
			
			
			// 生日选择
			bindDateChange(e) {
				this.birthday = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			
			
			// 地址处理
			update (e) {
				this.address = e.name.join('/');
				// console.log(this.address)
			},
			change(e) {
				this.address = e.name.join('/');
				
			}
			
			
		}
	}
</script>

<style scoped>
	.page-wrapper {
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}
	.page-wrapper>ul {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 0 30rpx
	}
	.page-wrapper>ul>li {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eeeeee;
	}
	.page-wrapper>ul>li:last-child {
		border: none;
	}
	.page-wrapper>ul>li>h3 {
		font-size: 30rpx;
		color: #333333;
		flex-shrink: 0;
	}
	
	
	.page-wrapper>ul>li>p {
		flex-grow: 1;
		text-align: end;
		font-size: 24rpx;
		color: #999999;
	}
	
	.page-wrapper>ul>li>p>picker {
		width: 100%;
	}
	
	.page-wrapper>ul>li>p>image {
		width: 101rpx;
	}
	.page-wrapper>ul>li>span {
		flex-shrink: 0;
		margin-left: 20rpx;
	}
	
	.page-wrapper>ul>li>span>image {
		width: 17rpx;
	}
	
	.page-wrapper>button {
		background-image: linear-gradient(to right, #0973F7, #0286FA);
		width: 602rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border:none;
		color: #ffffff;
		font-size: 34rpx;
		margin-top: 100rpx
	}
	
</style>
